import React, {useEffect, useState} from 'react';
import './index.css'
import {useHistory} from "react-router-dom";
import http from "../../../../../model/http";
// import prev from '../../libs/img/com/prev.png'
import {Modal, List, Tabs, Accordion, Toast, Button, ListView} from 'antd-mobile';
import prev from '../../../../../libs/img/com/prev.png'
import Draggable from 'react-draggable';
// import browserUtils from '../../libs/js/device'

let list=[]
function NewAdd(props) {
    const history = useHistory();

    console.log("prop",props.customerCrmId)
    let [visible,setVisible]=useState(false)
    // let [list,setList]=useState([])

    useEffect(()=>{

    },[])
    
  
    const callPhone = async (item)=>{
        const data = await http.get('/feedback/wxworkMakeCall', {
            customerId:props.customerCrmId,
            phoneUID:item.phoneUID
        });
        Toast.success(data.msg)
    }

    const  clickPhone=async (e)=>{
        console.log("elem")
         
        // http://wxwork.gzsg.cn/wxwork/feedback/wxworkPhoneList?customerId=20210924115426807000


        let phoneList = await http.get('/feedback/wxworkPhoneList', {
            customerId:props.customerCrmId
        });

        console.log("phoneList",phoneList)

        if(phoneList.code == 0){
            
           
            
            if(phoneList.data.length > 0){
                // setList(phoneList.data)
                list=phoneList.data
                setTimeout(()=>{
                    Modal.alert('客户列表', 
                    (<div>
                        {
                          phoneList.data.map( (item,index) =>(
                          <div style={{display:'flex',flexDirection:'row',justifyContent:'center'}}>
                               <span> 号码{index+1} : </span> 
                               <span style={{marginLeft:"12px"}}> {item.phone}</span>
                               <Button onClick={()=>{callPhone(item)}} style={{marginLeft:"12px",fontSize:"12px",backgroundColor:"green",height:"26px",paddingLeft:"8px",paddingRight:"8px",lineHeight:"26px"}} >立即拨号</Button>
                           </div>
                        )  )
                      }
                       </div>)
                    , [{ text: '确定' }]
                    )
                },300)
              
              
 


            }

            
        }else{
            Toast.fail(phoneList.msg)
        }


       
    }

    const modelHtml= (<div>
        {
          list.map( (item,index) =>(
          <div style={{display:'flex',flexDirection:'row',justifyContent:'center'}}>
               <span> 号码{index+1} : </span> 
               <span style={{marginLeft:"12px"}}> {item.phone}</span>
               <Button onClick={()=>{callPhone(item)}} style={{marginLeft:"12px",fontSize:"12px",backgroundColor:"green",height:"26px",paddingLeft:"8px",paddingRight:"8px",lineHeight:"26px"}} >立即拨号</Button>
           </div>
        )  )
      }
       </div>)


    const nextStep= (e)=>{
        history.push(`/clientReview/add`, {
            customerName: props.customerName,
            customerCrmId: props.customerCrmId,
            originId:1
            // srid: smallTabsValue
        })
    }

    return (

        // <Draggable axis="y"
        //            handle=".handle">
        //     <div className="handle com-header"  >
        //         <div style={{cursor: 'pointer'}} onClick={(e) => {
        //             history.go(-1)
        //         }}>
        //             <img src={prev} alt=""  style={{width:'1.82rem',height:'0.84rem'}}/>
        //         </div>
        //
        //     </div>
        // </Draggable>

      <div>
          {(<div className='com-header1' >
          {/* <Button color='primary'  onClick={toDeails.bind(this)}  style={{  border: '1px solid green',fontSize:'14px' ,height:'30px' ,lineHeight:'30px',width:'120px',color:"green" }}>查看回访</Button>        */}
          <span style={{color: '#39f',fontSize:'41px',marginLeft:'8px'}} class="iconfont icon-dianhua"  onClick={(e) => clickPhone(e)}></span>
          <span style={{color: '#39f',fontSize:'41px',marginLeft:'8px'}}  class="iconfont icon-huifangxinke"  onClick={(e) => nextStep(e)}></span>
         
         
          </div>)}
          
          {/* <Modal visible={visible} 
             popup
             maskClosable
             animationType='slide-up'>
            <div>
               {
                  list.map( (item,index) =>(
                         <div style={{display:'flex',flexDirection:'row'}}>
                              <span> 号码{index+1} </span> 
                              <span> {item.phone}</span>
                              <Button >立即拨号</Button>
                          </div>

                  )  )

               }


            </div>
             
          </Modal> */}

      </div>
  )
}

export default NewAdd;